<div ng-controller="userscontroller">

	<img ng-show="loadingUsers" style="width:25px;height:25px" alt="{{ Main_Loading }}" src="Resources/Pictures/ajax-loader.gif" />

	<div class="task" ng-hide="loadingUsers">
		<button ng-show="canAddUser" type="button" class="btn btn-primary" ng-click="prepareAddUserCommand()">
			<span class="glyphicon glyphicon-plus"></span> {{ Main_Add }}
		</button>
		<label class="checkbox" ng-repeat="user in users">
			<span>
				<div ng-switch="user.Profile" style="float:left;margin-right:5px;">
					<img ng-switch-when="0" src="./Resources/Pictures/user.png" height="20px" width="20px"/>
					<img ng-switch-when="1" src="./Resources/Pictures/volunteer.png" height="20px" width="20px"/>
					<img ng-switch-when="2" src="./Resources/Pictures/member.png" height="20px" width="20px"/>
					<img ng-switch-when="3" src="./Resources/Pictures/treasurer.png" height="20px" width="20px"/>
					<img ng-switch-when="4" src="./Resources/Pictures/administrator.png" height="20px" width="20px"/>
				</div>
				<div ng-switch="user.State" style="float:left;margin-right:5px;">
					<img ng-switch-when="0" src="./Resources/Pictures/unknown.png" height="20px" width="20px"/>
					<img ng-switch-when="1" src="./Resources/Pictures/online.png" height="20px" width="20px"/>
					<img ng-switch-when="2" src="./Resources/Pictures/offline.png" height="20px" width="20px"/>
					<img ng-switch-when="3" src="./Resources/Pictures/banned.png" height="20px" width="20px"/>
				</div>
			#{{user.Id}} &nbsp; {{user.Firstname}} {{user.Lastname}} &nbsp; &nbsp; &nbsp; {{user.Email}} &nbsp; {{user.PhoneNumber}}
			</span>
			<a ng-click="confirmDeleteUserCommand(user)" class="pull-right"><i class="glyphicon glyphicon-trash"></i></a>
			<a ng-click="prepareEditUserCommand(user)" class="pull-right"><i class="glyphicon glyphicon-edit" style="margin-right:10px"></i></a>
		</label>
	</div>

	<div class="modal" id="addUser">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">x</button>
					<h4 class="modal-title">{{ Users_AddUser }}</h4>
				</div>
				<div class="modal-body">
					<div class="container">
						<div class="row">
							<div class="col-sm-8">
							<form>
								<div class="row">
									<div class="col-md-2"><img src="Resources/Pictures/user.png" alt="user" width="100px"/></div>
									<div class="col-md-10">
										<div class="row form-group">
											<div class="col-xs-5">{{ Users_Fisrtname }} <input ng-model="addFirstname" class="form-control" placeholder="{{ Users_Fisrtname }}"/></div>
										</div>
										<div class="row form-group">
											<div class="col-xs-5">{{ Users_Lastname }} <input ng-model="addLastname" class="form-control" placeholder="{{ Users_Lastname }}"/></div>
										</div>
										<div class="row form-group">
											<div class="col-xs-5">{{ Users_Company }} <input ng-model="addCompany" class="form-control" placeholder="{{ Users_Company }}"/></div>
										</div>
									</div>
									<div class="row form-group">
										<div class="col-xs-6">{{ Users_Email }} <input ng-model="addEmail" class="form-control" placeholder="{{ Users_Email }}"/></div>
									</div>
									<div class="row form-group">
										<div class="col-xs-6">{{ Users_PhoneNumber }} <input ng-model="addPhoneNumber" class="form-control" placeholder="{{ Users_PhoneNumber }}"/></div>
									</div>
									<div class="row form-group">
										<div class="col-xs-6">{{ Users_WebAddress }} <input ng-model="addWebAddress" class="form-control" placeholder="{{ Users_WebAddress }}"/></div>
									</div>
									<div class="row form-group">
										<div class="col-xs-6">{{ Users_Profile }} <select class="form-control" data-ng-options="pro for pro in profiles" data-ng-model="addProfile"></select></div>
									</div>
								</div>
								<img ng-hide="canAddUser" desc="banner" style="width:25px;height:25px" alt="{{ Main_Loading }}" src="Resources/Pictures/ajax-loader.gif" />
								<button ng-show="canAddUser" type="button" class="btn btn-primary" ng-click="addUserCommand()">
									<span class="glyphicon glyphicon-ok"></span> {{ Main_Validate }}
								</button>
							</form>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<div id="messageAddUser" class="alert alert-{{ messageType }} alert-dismissible" role="alert" ng-show="messageAddUserVisible">
						<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						{{ messageLabel }}
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="modal" id="editUser">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">x</button>
					<h4 class="modal-title">{{ Users_EditUser }} #{{ editUserId }}</h4>
				</div>
				<div class="modal-body">
					<div class="container">
						<div class="row">
							<div class="col-sm-8">
							<form>
								<div class="row">
									<div class="col-md-2" id="dragandrophandler">
										<p ng-hide="editUserHasAvatar">Déposez une photo ici</p>
										<img ng-show="editUserHasAvatar" ng-src="data:{{ editUserAvatarMime }};base64,{{ editUserAvatar }}" width="100%" />
									</div>
									<div class="col-md-10">
										<div class="row form-group">
											<div class="col-xs-5">{{ Users_Fisrtname }} <input ng-model="editFirstname" class="form-control" placeholder="{{ Users_Fisrtname }}"/></div>
										</div>
										<div class="row form-group">
											<div class="col-xs-5">{{ Users_Lastname }} <input ng-model="editLastname" class="form-control" placeholder="{{ Users_Lastname }}"/></div>
										</div>
										<div class="row form-group">
											<div class="col-xs-5">{{ Users_Company }} <input ng-model="editCompany" class="form-control" placeholder="{{ Users_Company }}"/></div>
										</div>
									</div>
									<div class="row form-group">
										<div class="col-xs-6">{{ Users_Email }} <input ng-model="editEmail" class="form-control" placeholder="{{ Users_Email }}"/></div>
									</div>
									<div class="row form-group">
										<div class="col-xs-6">{{ Users_PhoneNumber }} <input ng-model="editPhoneNumber" class="form-control" placeholder="{{ Users_PhoneNumber }}"/></div>
									</div>
									<div class="row form-group">
										<div class="col-xs-6">{{ Users_WebAddress }} <input ng-model="editWebAddress" class="form-control" placeholder="{{ Users_WebAddress }}"/></div>
									</div>
									<div class="row form-group">
										<div class="col-xs-6">{{ Users_Profile }} 
											<select class="form-control" data-ng-options="pro for pro in profiles" data-ng-model="editProfile"></select>
										</div>
									</div>
									<div class="row form-group">
										<div class="col-xs-6">{{ Users_Login }} <input ng-model="editLogin" class="form-control" placeholder="{{ Users_Login }}"/></div>
									</div>
								</div>
								<img ng-hide="canUpdateUser" desc="banner" style="width:25px;height:25px" alt="{{ Main_Loading }}" src="Resources/Pictures/ajax-loader.gif" />
								<button ng-show="canUpdateUser" type="button" class="btn btn-primary" ng-click="updateUserCommand()">
									<span class="glyphicon glyphicon-ok"></span> {{ Main_Validate }}
								</button>
								<button ng-show="canUpdateUser" type="button" class="btn btn-primary" ng-click="updateUserPasswordCommand()">
									<span class="glyphicon glyphicon-ok"></span> {{ Users_GeneratePassword }}
								</button>
							</form>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<div id="messageUpdateUser" class="alert alert-{{ messageType }} alert-dismissible" role="alert" ng-show="messageUpdateUserVisible">
						<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						{{ messageLabel }}
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="modal" id="confirmDeleteUser">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">x</button>
					<h4 class="modal-title">#{{ currentUser.Id }} {{ currentUser.Firstname }} {{ currentUser.Lastname }}</h4>
				</div>
				<div class="modal-body">
					<div class="container">
						<div class="row">
							<div class="col-sm-5">
								{{ Users_ConfirmDeleteUserLabel }}
								<div class="input-group">
									<div class="input-group-btn">
										<button type="button" class="btn btn-primary" ng-click="deleteUserCommand(currentUser)">
											<span class="glyphicon glyphicon-ok"></span>
										</button>
										<button type="button" class="btn btn-primary" ng-click="cancelDeleteUserCommand()">
											<span class="glyphicon glyphicon-remove"></span>
										</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
			
				</div>
			</div>
		</div>
	</div>
</div>